/*
  学习目标：生命周期-挂载阶段
  1. constructor : 创建时  👎几乎不用
    1.1 快捷键: con
    1.2 对标: created
  2. render: 
    2.1 作用: 负责渲染界面的
    2.2 会执行多次
  3. componentDidMount: 
    3.1 快捷键: cdm
    3.2 对标: 挂载后 mounted
    3.3 场景: 💥1. 发请求  💥2.开启定时器 3. 最先获取dom元素



*/
import React, { Component } from 'react';

export default class App extends Component {
  // con
  // 对比 created
  constructor() {
    // 💥 super 表示继承父级所有的属性和方法
    super();
    // 👎 💥 早期， 可以在声明state、声明ref
    this.state = {
      count: 100,
    };
    this.iptRef = React.createRef();

    console.log(' constructor被执行了 ----->  ');
  }

  // 💥负责渲染界面的
  render() {
    console.log(' render被执行了  ----->  ');
    return <div>{this.state.count}</div>;
  }

  // cdm
  // 场景： 💥1. 发请求  💥2.开启定时器 3. 最新获取dom元素
  componentDidMount() {
    console.log(' componentDidMount 被执行了 ----->  ');
  }
}
